import React, { useEffect } from 'react';
//订单商品男女比例分布图
import * as echarts from 'echarts';
import '../sacc/Stacking.scss'
const Stacking = () => {
    useEffect(() => {
        var option = echarts.init(document.getElementById('Stack') || document.body);
        option.setOption({
            title: {
                text: '订单商品男女比例分布图',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['手机', '笔记本', '耳机', '键盘', '音箱']
            },
            yAxis: {
            },
            series: [
                {
                    name: 'man',
                    type: 'bar',
                    stack: 'total',
                    data: [200, 100, 400, 80, 70]
                },
                {
                    name: 'woman',
                    type: 'bar',
                    stack: 'total',
                    data: [35, 20, 200, 10, 10,]
                }
            ]
        })
    }, [])
    return (
        <div>
            <div id='Stack'></div>
        </div>
    );
};

export default Stacking;